<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .public_title p{
           margin-top: 22px;
       }
       .imgText_list_box ul li{
           display: flex;
           justify-content: space-between;
           flex-wrap: wrap;
           margin-bottom: 40px;
            padding: 20px;
            border: 1px solid var(--c_b_dark);
       }
       .imgText_list_box ul li .imgText_list_img{
           --ms-flex: 0 0 44.5%;
           flex: 0 0 44.5%;
           max-width: 0 0 44.5%;
           height: 370px;
       }
       .imgText_list_box ul li .imgText_list_img img{
           width: 100%;
           height: 100%;
       }
       .imgText_list_box ul li .imgText_list_text{
            --ms-flex: 0 0 52.5%;
            flex: 0 0 52.5%;
            max-width: 0 0 52.5%;
            padding-top: 60px;
       }
       .imgText_list_box ul li .imgText_list_text span{
            font-size: var(--f_text);
            line-height: var(--l_text);
            color:var(--c_text);
       }
       .imgText_list_box ul li .imgText_list_text p{
            font-size: var(--f_describe);
            line-height: var(--l_describe);
            color:var(--c_subtitle);
            padding-top: 14px;
       }
       .imgText_list_box ul li .imgText_list_text a{
        font-size: var(--f_describe);
            line-height: var(--l_describe);
            color:var(--c_theme);
            max-width: 138px;
            display: block;
            height: 44px;
            border: 1px solid var(--c_theme);
            text-align: center;
            line-height: 44px;
            transform: translate(0%,60px);
       }
        /* 交叉排 */
       .imgText_list3 ul li{
            display:flex;
            flex-direction: row;
            flex-wrap: wrap;
       }
       .imgText_list3 ul li:nth-of-type(1) .imgText_list_img{
           order:2;
       }
       .imgText_list3 ul li:nth-of-type(2) .imgText_list_text{
           order: 1;
       }
       .imgText_list3 ul li .imgText_list_text a{
            transform: translate(0%,60px);
            margin: 20px 0;
       }
       @media screen and (max-width:768px) {
            .imgText_list3 ul li:last-child{
                margin-bottom: 0px;
            }
            .imgText_list3 ul li{
                    display:flex;
                    flex-direction: column;
                    flex-wrap: wrap;
            }
            .imgText_list3 ul li :nth-child(1){
                order: 1;
            }
            .imgText_list3 ul li :nth-child(2){
                order: 2;
            }
            .imgText_list3 ul li .imgText_list_text a{
                transform: translate(0%,10px);
                margin: 20px 0;
            }
            .imgText_list_box ul li .imgText_list_text{
                padding-top: 20px;
            }
       }
    </style>
</head>
<body>
    <!-- 交叉排 -->
    <div class="imgText_list modular title_center imgText_list3">
        <div class="imgText_list_box public_width">
            <div class="public_title">
                <h2>更多成功案例</h2>
                <p>在这里我们会让你的作品有更多人喜欢热爱你的作品</p>
            </div>
            <ul>
                <li>
                    <div class="imgText_list_img">
                        <img src="../images/case_lists_four.webp" alt="">
                    </div>
                    <div class="imgText_list_text">
                        <span>香港 XXX艺术展</span>
                        <p>
                            XXX艺术展源于瑞士，现每年仅在、迈阿密、香港三地举行，
                            以严苛的艺廊挑选和高质量的艺术展览而闻名于世艺术展是当今世界上公认的水平较高的艺术博览会，
                            并以其悠久历史和巨大交易额而被视为是全球艺术市场的晴雨表有着世界艺博会。
                        </p>
                        <a href="#">资讯客服</a>
                    </div>
                </li>
                <li>
                    <div class="imgText_list_img">
                        <img src="../images/case_lists_four.webp" alt="">
                    </div>
                    <div class="imgText_list_text">
                        <span>香港 XXX艺术展</span>
                        <p>
                            XXX艺术展源于瑞士，现每年仅在、迈阿密、香港三地举行，
                            以严苛的艺廊挑选和高质量的艺术展览而闻名于世艺术展是当今世界上公认的水平较高的艺术博览会，
                            并以其悠久历史和巨大交易额而被视为是全球艺术市场的晴雨表有着世界艺博会。
                        </p>
                        <a href="#">资讯客服</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>